<template>
  <div>
    <MainGrid>
      <!--   工具栏   -->
      <template #tool-line>
        <a-button type="primary" @click="handleOpenAddModal">新增管理员</a-button>
      </template>
      <!--   表格   -->
      <template #main>
        <a-table :pagination="paginationObj" :dataSource="dataSource" :columns="columns" bordered>
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'permission'">
              <a-tag v-if="text.key === 1" color="green">{{ text.label }}</a-tag>
              <a-tag v-else-if="text.key === 2" color="orange">{{ text.label }}</a-tag>
              <a-tag v-else-if="text.key === 3" color="red">{{ text.label }}</a-tag>
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)">修改</a-button>
                <a-button type="primary" @click="handleDelete(record)" danger>删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </template>
    </MainGrid>
    <EditForm ref="editFormRef"/>
    <AddForm ref="addFormRef"/>
  </div>
</template>

<script setup lang="ts">
import {createVNode, onMounted, ref} from "vue";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

import {IListItem} from "./types";
import {ADMIN_LIST_DEFAULT_PAGE_SIZE} from "@/constants/data";
import {columns, dataSource, adminStore, paginationObj} from './config'

import MainGrid from "../../../components/MainGrid/MainGrid.vue"
import AddForm from '@/views/Admin/Main/AddForm/AddForm.vue'
import EditForm from "@/views/Admin/Main/EditForm/EditForm.vue"
import useAccountStore from "@/store/accountModule";
import {checkUserPermission} from "@/utils";

const accountStore = useAccountStore()
onMounted(() => {
  adminStore.requestAdminListAction({
    current_page: 1,
    page_size: ADMIN_LIST_DEFAULT_PAGE_SIZE
  })
})

const addFormRef = ref<InstanceType<typeof AddForm>>(null)
const handleOpenAddModal = () => {
  addFormRef.value.handleAddUserModal(true)
}

const editFormRef = ref<InstanceType<typeof EditForm>>(null)
const handleEdit = async (record: IListItem) => {
  const loginUserPermission = accountStore.userInfo.permission.key
  const lineUserPermission = record.permission.key
  checkUserPermission(loginUserPermission, lineUserPermission)
      .then(async () => {
        const id = record.id
        await adminStore.requestAdminDetailAction({id})
        editFormRef.value.handleEditModal(true)
      })
      .catch(() => message.error("权限不足"))
}

const handleDelete = (record: IListItem) => {
  const loginUserPermission = accountStore.userInfo.permission.key
  const lineUserPermission = record.permission.key
  checkUserPermission(loginUserPermission, lineUserPermission)
      .then(() => {
        Modal.confirm({
          title: '确定要删除这个管理员吗？',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: "取消",
          onOk() {
            return new Promise((async (resolve, reject) => {
              const flag = await adminStore.deleteAdminAction({
                admin_id: record.id
              })
              flag ? resolve("操作成功") : reject()
            }))
          },
        });
      })
      .catch(() => message.error("权限不足"))

}
</script>

<style>
</style>
